Top React Hooks — Scroll and Breakpoints

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

react-use

The react-use library is a big library with many handy hooks.

The useScrolling hook lets us keep track of whether the user is scrolling an element or not.

To use it, we can write:

import React from "react";
import { useScrolling } from "react-use";

export default function App() {
  const scrollRef = React.useRef(null);
  const scrolling = useScrolling(scrollRef);

  return (
    <div ref={scrollRef} style={{ overflow: "scroll", height: 300 }}>
      <div style={{ position: "fixed" }}>
        {scrolling ? "Scrolling" : "Not scrolling"}
      </div>
      {Array(1000)
        .fill()
        .map((_, i) => (
          <p key={i}>{i}</p>
        ))}
    </div>
  );
}

We create the ref that we pass into the element that we want to watch the scrolling for.

Also, we pass the ref to the element to the useScrolling hook.

The hook returns the scrolling state of the element.

The useScrollbarWidth hook returns the browser’s scrollbar width.

It’ll return undefiuned until the DOM is ready.

For instance, we can write:

import React from "react";
import { useScrollbarWidth } from "react-use";

export default function App() {
  const sbw = useScrollbarWidth();

  return (
    <div>
      {sbw === undefined
        ? `DOM is not ready yet`
        : `scrollbar width is ${sbw}px`}
    </div>
  );
}

We have the useScrollbarWidth hook which returns the scroll bar width.

The useWindowSize hook returns the dimensions of the browser window.

For instance, we can write:

import React from "react";
import { useWindowSize } from "react-use";

export default function App() {
  const { width, height } = useWindowSize();

  return (
    <div>
      <div>width: {width}</div>
      <div>height: {height}</div>
    </div>
  );
}

We called the useWindowSize hook to get the width and height of the window.

We can use the useMeasure hook to get the dimensions of an HTML element.

It uses the resize observer API to do so.

For example, we can write:

import React from "react";
import { useMeasure } from "react-use";

export default function App() {
  const [ref, { x, y, width, height, top, right, bottom, left }] = useMeasure();

  return (
    <div ref={ref}>
      <div>x: {x}</div>
      <div>y: {y}</div>
      <div>width: {width}</div>
      <div>height: {height}</div>
      <div>top: {top}</div>
      <div>right: {right}</div>
      <div>bottom: {bottom}</div>
      <div>left: {left}</div>
    </div>
  );
}

x and y are the x and y coordinates of the top left corner of the element.

width and height are their width and height.

top , right , bottom , and left are the position values of the element.

The createBreakpoint function creates the useBreakpoint hook lets us detect screen width breakpoints.

For instance, we can write:

import React from "react";
import { createBreakpoint } from "react-use";

const useBreakpoint = createBreakpoint();

export default function App() {
  const breakpoint = useBreakpoint();

  if (breakpoint === "laptopL") return <div> very big Laptop </div>;
  else if (breakpoint === "laptop") return <div> Laptop</div>;
  else if (breakpoint === "tablet") return <div>Tablet</div>;
  else return <div>Too small</div>;
}

We have the useBreakpoint hook which returns the breakpoint that matches the screen size.

Also, we can change the breakpoints by passing in an object to createBreakpoint :

import React from "react";
import { createBreakpoint } from "react-use";

const useBreakpoint = createBreakpoint({ XL: 1200, L: 700, S: 350 });

export default function App() {
  const breakpoint = useBreakpoint();

  if (breakpoint === "XL") return <div>XL</div>;
  else if (breakpoint === "L") return <div>L</div>;
  else if (breakpoint === "S") return <div>S</div>;
  else return <div>too small</div>;
}

We pass in an object with the breakpoint names as the keys and the widths as the values.

Then we use useBreakpoint the same way.

Conclusion

The react-use package has hooks to detect widths and detect scrolling.